<template>
    <div class="goods-list">
       <!-- <router-link class="goods-item" v-for="item in goodslist" :key="item.id" 
       :to="'/home/goodsinfo/'+ item.id" tag="div"> -->

       <div class="goods-item" v-for="item in goodslist" :key="item.id" 
       @click="goDetail(item.id,item.title,item.sell_price,item.market_price,item.stock_quantity)">
           <img :src="item.img_url" alt="">
           <div class="title">{{ item.title }}</div>
           <div class="info">
               <div class="price">
                   <span class="now">${{ item.sell_price }}</span>
                   <span class="old">${{ item.market_price }}</span>
               </div>
               <div class="sell">
                   <span class="now">热卖中</span>
                   <span class="old">剩{{ item.stock_quantity }}件</span>
               </div>
           </div>
        </div>   
       <!-- </router-link> -->
    </div>
</template>

<script>
    export default {
        data(){
            return{
                goodslist:[
                    {
                        id:21,
                        title:"华为 HUAWEI P20 AI智慧徕卡双摄全面屏游戏手机 ",
                        click:225,
                        img_url:'/src/images/goodslist/goods1.jpg',
                        sell_price:2198,
                        market_price:2499,
                        stock_quantity:60
                    },
                    {
                        id:22,
                        title:"一加手机6 8GB+128GB 琥珀红 ",
                        click:125,
                        img_url:'/src/images/goodslist/goods2.jpg',
                        sell_price:3298,
                        market_price:3999,
                        stock_quantity:800
                    },
                    {
                        id:23,
                        title:"荣耀10 全面屏AI摄影手机 6GB+64GB 游戏手机 ",
                        click:112,
                        img_url:'/src/images/goodslist/goods3.jpg',
                        sell_price:2598,
                        market_price:2799,
                        stock_quantity:360
                    },
                    {
                        id:24,
                        title:"Apple iPhone X (A1903) 64GB 深空灰色 移动联通4G手机 ",
                        click:1225,
                        img_url:'/src/images/goodslist/goods4.jpg',
                        sell_price:7099,
                        market_price:7899,
                        stock_quantity:20
                    },
                    {
                        id:25,
                        title:"【移动专享版】一加手机6 8GB+128GB ",
                        click:44,
                        img_url:'/src/images/goodslist/goods5.jpg',
                        sell_price:3598,
                        market_price:3899,
                        stock_quantity:40
                    },
                    {
                        id:26,
                        title:"罗马仕 移动电源SW20 充电宝20000毫安 3USB输出 ",
                        click:5,
                        img_url:'/src/images/goodslist/goods6.jpg',
                        sell_price:98,
                        market_price:199,
                        stock_quantity:220
                    },
                    {
                        id:27,
                        title:"vivo NEX 零界全面屏 升降式前置摄像头拍照 6GB+128GB  ",
                        click:125,
                        img_url:'/src/images/goodslist/goods7.jpg',
                        sell_price:3898,
                        market_price:4499,
                        stock_quantity:1235
                    },
                    {
                        id:28,
                        title:"华为HUAWEI P20 Pro 全面屏徕卡三摄6GB+128GB ",
                        click:3325,
                        img_url:'/src/images/goodslist/goods8.jpg',
                        sell_price:5498,
                        market_price:5899,
                        stock_quantity:460
                    },
                ]
            }
        },
        methods:{
            goDetail(id,title,sell_price,market_price,stock_quantity){
                //使用js的形式进行路由导航
                //区分 this.$route 和 this.$router这两个对象
                //其中 this.$route 是路由参数对象，所有路由参数中，params query 都属于它
                // this.$router 是一个路由导航对象，用它 可以使用js代码，实现路由的
                // 前进、后退、跳转到新的url地址

                // 用法
                // 1.字符串
                // this.$router.push("/home/goodsinfo/"+id)
                // 2.传递对象
                // this.$router.push({ path:"/home/goodsinfo/"+id })
                // 3.传递命名的路由
                this.$router.push({name:"goodsinfo", 
                params:{id:id,title:title,sell_price,market_price,stock_quantity}})
            }
        }
    }
</script>

<style lang="less" scoped>
    .goods-list{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 10px 10px 0 10px;
        margin-bottom: 50px;
        .goods-item{
            width: 49%;
            border: 1px solid #ccc;
            box-shadow: 0 0 8px #ccc;
            margin-bottom: 8px;
            padding: 2px;
            display: flex;
            flex-direction: column;
            justify-content: space-between; 
            min-height: 290px;
            img{
                width: 100% ;
            }
            .title{
                font-size: 14px;
                font-weight:bold;
            }
            .info{
                background-color: #eee;
                .price{
                    padding:0 10px;
                    .now{
                        font-size: 14px;
                        color: red;
                        font-weight: bold;
                    };
                    .old{
                        font-size: 12px;
                        color: #948d8d;
                        text-decoration: line-through;
                        margin-left: 10px;
                    }
                };
                 .sell{
                    font-size: 13px;
                    color: #948d8d;       
                    display: flex;
                    justify-content: space-between;
                    padding: 5px;            
                }
            }
        }
    }
</style>
